<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style>

    </style>
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.carouFredSel-6.2.1.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.touchSwipe.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.transit.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {

            // Using custom configuration
            $("#foo1").carouFredSel({
                item: 8,
                width: 1600,
                left: 0,
                auto: false,
                pagination: "#foo2_pag",
                mousewheel: true,
                swipe: {
                    onMouse: true,
                    onTouch: true
                },
                scroll: {
                    items: 1,
                    duration: 1000,
                    pauseOnHover: true
                },
                items: {
                    width: 300,
                    //	height: '30%',	//	optionally resize item-height
                    visible: {
                        min: 2,
                        max: 6
                    }
                }



            });
            return false;
            $(".view-item").hover(
                    function () {
                        $(this).css("background", "#fff");
                        $(this).parent().find(".view-item h3").css("color", "#000");
                        $(this).parent().find(".num-people span").css("color", "#fc666a");

                    }, function () {
                        $(this).css("background", "#000");
                        $(this).parent().find(".view-item h3").css("color", "#fff");
                        $(this).parent().find(".num-people span").css("color", "#fff");

                    }

            )
            return false;
        });




    </script>


</head>
<body>
<div class="wrapper">
<div class="modals">
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Demo Thankyou
    </button>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Thankyou</h4>
                </div>
                <div class="modal-body">
                    <p class="conten-modal">  We will check the ticket and contact you as soon as possible!</p>
                    <figure class="img-modal">
                        <img src="images/image-thankyou.png" alt=""/>
                    </figure>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalpaymen">
        Demo Pay
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModalpaymen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalpaymen">Payment and Deliver</h4>
                </div>
                <div class="modal-body">
                    <h4>  Taylor Swift Confirms Red Tour Will Play Stadiums Down Under</h4>
                    <p>With: Taylor Swift, Hoai Linh, Bang Kieu, Ha Vy, Quang Le</p>
                    <div class="view-item">

                        <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                        <div class="address">
                            <p> 19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam</p>
                        </div>


                    </div>
                    <div class="info">
                        <p>
                            <label>Name:</label> Nguyen minh Thong
                        </p>
                        <p>
                            <label>Email:</label> info@abc.com
                        </p>
                        <p>
                            <label>Phone:</label> 090 123 456

                        </p>
                        <p><label>Adress:</label>59/19 Nguyen Trai, Quan 1, TP.HCM</p>

                    </div>
                    <div class="check-radio">
                        <p class="cod">
                            <input type="radio"/> <label >cod</label>
                        </p>
                        <p class="creadit">
                            <input type="radio"/><label > Creadit Card</label>
                        </p>
                    </div>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>

<header class="hd-home container">
    <div class="row">
        <div class="col-xs-7">
            <div class="row-fluid">
                <div class="logo pull-left"><h1>Your Logo</h1></div>
                <p class="sub-title pull-right">WHERE THE FUN STARTS</p>
            </div>
        </div>
        <div class="col-xs-5 top-head">
            <ul>
                <li class="country"><a class="" href="#">VN</a></li>
                <li class="country"><a class="current" href="">EN</a></li>
                <li class="search"><input type="text" placeholder="Search"/></li>
            </ul>
        </div>
    </div>
</header>
<section class="container ">
<div class="row">
<div class="col-xs-12 posi-rela">
<div class="list_carousel">
    <ul id="foo1">
        <li>
            <div class="item-image-wrap">
                <img src="images/event_01.jpg" alt=""/>

            </div>

            <div class="view-item">

                <h3>Billboard Music Awards
                    Returning June 19 With
                    24-Hour Event</h3>

                <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                <div class="address">
                    <p> 19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam
                    </p></div>
                <div class="bt-item">

                    <div class="more pull-left"><a href="#">more info</a></div>
                    <div class="num-people pull-right">
                        <span> 30 </span> people book this event
                    </div>
                </div>


            </div>
        </li>
        <li>
            <div class="item-image-wrap">
                <img src="images/event_02.jpg" alt=""/>

            </div>

            <div class="view-item">

                <h3>Billboard Music Awards
                    Returning June 19 With
                    24-Hour Event</h3>

                <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                <div class="address">
                    <p> 19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam</p>
                </div>
                <div class="bt-item">
                    <div class="more pull-left"><a href="#">more info</a></div>
                    <div class="num-people pull-right">
                        <span> 30 </span> people book this event
                    </div>
                </div>


            </div>
        </li>
        <li>
            <div class="item-image-wrap">
                <img src="images/event_03.jpg" alt=""/>

            </div>

            <div class="view-item">

                <h3>Billboard Music Awards
                    Returning June 19 With
                    24-Hour Event</h3>

                <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                <div class="address">
                    <p>
                        19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam
                    </p>
                </div>
                <div class="bt-item">
                    <div class="more pull-left"><a href="#">more info</a></div>
                    <div class="num-people pull-right">
                        <span> 30 </span> people book this event
                    </div>
                </div>


            </div>
        </li>
        <li>
            <div class="item-image-wrap">
                <img src="images/event_04.jpg" alt=""/>

            </div>

            <div class="view-item">

                <h3>Billboard Music Awards
                    Returning June 19 With
                    24-Hour Event</h3>

                <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                <div class="address">
                    <p> 19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam
                    </p></div>
                <div class="bt-item">
                    <div class="more pull-left"><a href="#">more info</a></div>
                    <div class="num-people pull-right">
                        <span> 30 </span> people book this event
                    </div>
                </div>


            </div>
        </li>
        <li>
            <div class="item-image-wrap">
                <img src="images/event_04.jpg" alt=""/>

            </div>

            <div class="view-item">

                <h3>Billboard Music Awards
                    Returning June 19 With
                    24-Hour Event</h3>

                <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                <div class="address">
                    <p> 19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam</p>
                </div>
                <div class="bt-item">
                    <div class="more pull-left"><a href="#">more info</a></div>
                    <div class="num-people pull-right">
                        <span> 30 </span> people book this event
                    </div>
                </div>


            </div>
        </li>
        <li>
            <div class="item-image-wrap">
                <img src="images/event_04.jpg" alt=""/>

            </div>

            <div class="view-item">

                <h3>Billboard Music Awards
                    Returning June 19 With
                    24-Hour Event</h3>

                <div class="time"><p>7:30PM, May. 2, 2013</p></div>
                <div class="address">
                    <p> 19 Nguyen An Ninh Street, Dist 1, Ho Chi Minh City, Vietnam
                    </p></div>
                <div class="bt-item">
                    <div class="more pull-left"><a href="#">more info</a></div>
                    <div class="num-people pull-right">
                        <span> 30 </span> people book this event
                    </div>
                </div>


            </div>
        </li>

    </ul>

    <div class="clearfix"></div>

    <div class="pagination" id="foo2_pag"></div>


</div>
<div class="wrapper-boder">
    <div class="noti-info">
        <div class="location pull-left">
            <h4>location</h4> <span>Ho Chi Minh</span>
        </div>
        <div class="today pull-right">
            <h4>today</h4> <span>DD/MM/YY</span>
        </div>
        <div class="clearfix"></div>

    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom fix-btnav" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav menuman ">
                <li class="hot"><a href="#">hot</a></li>
                <li class="music"><a href="#">music</a></li>
                <li class="movie active"><a href="#">movie</a></li>
                <li class="sport"><a href="#">sport</a></li>
                <li class="drama"><a href="#">drama</a></li>
                <li class="fashion"><a href="#">fashion</a></li>
                <li class="reality"><a href="#">realityshow</a></li>

            </ul>


        </div>
        <!-- /.navbar-collapse -->
    </nav>

</div>
</div>

</div>

</section>


<footer class="ft-home container">
    <div class="row">
        <div class="col-xs-6 hotline pull-left">Hotline: 090 123 456 8</div>
        <div class="col-xs-6 pull-right">
            <ul class="list-inline ft-social">
                <li class="about-us"><a href="#">About</a></li>
                <li class="help"><a href="">Help</a></li>
                <li class="facebook"><a href="#">facebook</a></li>
                <li class="youtube"><a href="">youtube</a></li>
            </ul>
        </div>
    </div>
</footer>
</div>
</body>
</html>